import React from 'react';
import detailBlueIcon from '@/assets/img/detail_icon_blue.png';
import detailGrayIcon from '@/assets/img/detail_icon_gray.png';
import { ExplainTitle } from '../../../components/index';
import type { IFindStrategyPriceForecastItemType } from '../../../type';
import { ITitleType, IStrategyBenefitDetailKeyType } from '../../../type';
import { strategyBenefitTitleMap, titleMap } from '../../../dictionary';
import styles from './index.less';
import { ToFixed } from '../../../tool';
import { Spin, Tooltip } from 'antd';

interface IProps {
  /**
   * loading
   */
  loading?: boolean;
  /**
   * 标题类型
   */
  titleType: ITitleType.AISTRATEGY | ITitleType.CURRENTSTRATEGY;
  /**
   * 数据源
   */
  data?: IFindStrategyPriceForecastItemType;
  /**
   * 详情
   */
  onDetail?: (e?: any) => void;
}

const StrategyBenefit = (props: IProps) => {
  const { titleType = ITitleType.CURRENTSTRATEGY, data, onDetail, loading = false } = props;
  const _titleInfo = strategyBenefitTitleMap[titleType];
  const _total: any = data ? data[IStrategyBenefitDetailKeyType.TOTAL] : '';
  const _onDetail = (e: any) => {
    if (!loading) {
      onDetail && onDetail(e);
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.left}>
          <div className={styles.leftLogo}>
            <img src={_titleInfo.logo} className={styles.leftImg} />
          </div>
          <div className={styles.leftTitle}>{_titleInfo.title}</div>
        </div>
        <div
          className={loading ? styles.disabledRight : styles.right}
          onClick={() => _onDetail(titleType)}
        >
          <div className={styles.rightLogo}>
            <img src={loading ? detailGrayIcon : detailBlueIcon} className={styles.rightImg} />
          </div>
          <div className={loading ? styles.rightDisabledTitle : styles.rightTitle}>详情</div>
        </div>
      </div>
      <div className={styles.content}>
        {loading ? (
          <Spin />
        ) : (
          <div className={styles.bottom}>
            <div className={styles.bottomLeft}>
              <div className={styles.title}>收益增量(元)</div>
              <div className={styles.num}>
                <Tooltip
                  placement="topLeft"
                  title={
                    _total &&
                    (_total[IStrategyBenefitDetailKeyType.EARNINGS] ||
                      _total[IStrategyBenefitDetailKeyType.EARNINGS] === 0)
                      ? ToFixed(_total[IStrategyBenefitDetailKeyType.EARNINGS], 2)
                      : '-'
                  }
                >
                  {_total &&
                  (_total[IStrategyBenefitDetailKeyType.EARNINGS] ||
                    _total[IStrategyBenefitDetailKeyType.EARNINGS] === 0)
                    ? ToFixed(_total[IStrategyBenefitDetailKeyType.EARNINGS], 2)
                    : '-'}
                </Tooltip>
              </div>
            </div>
            <div className={styles.bottomRight}>
              <div className={styles.title}>
                <ExplainTitle
                  title={
                    titleType === ITitleType.CURRENTSTRATEGY
                      ? titleMap[ITitleType.CURRENTSTRATEGY].title
                      : titleMap[ITitleType.AISTRATEGY].title
                  }
                  hintText={
                    titleType === ITitleType.CURRENTSTRATEGY
                      ? titleMap[ITitleType.CURRENTSTRATEGY].hintText
                      : titleMap[ITitleType.AISTRATEGY].hintText
                  }
                />
              </div>
              <div className={styles.num}>
                <Tooltip
                  placement="topLeft"
                  title={
                    _total &&
                    (_total[IStrategyBenefitDetailKeyType.RISK] ||
                      _total[IStrategyBenefitDetailKeyType.RISK] === 0)
                      ? ToFixed(_total[IStrategyBenefitDetailKeyType.RISK], 2)
                      : '-'
                  }
                >
                  {_total &&
                  (_total[IStrategyBenefitDetailKeyType.RISK] ||
                    _total[IStrategyBenefitDetailKeyType.RISK] === 0)
                    ? ToFixed(_total[IStrategyBenefitDetailKeyType.RISK], 2)
                    : '-'}
                </Tooltip>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default StrategyBenefit;
